<template>
  <div v-if="!getIsPhone" class="order-records">
    <account-header></account-header>
    <div class="main-wrapper">
      <div class="main box-shadow">
        <account-tab 
          :activeIndex="activeIndex"
          :tabs="tabs"
          @click="updateActiveIndex"
        ></account-tab>
        <div class="pickers border-bottom">
          <tab-switches 
            :activeTabIndex="activeSwitchIndex" 
            @click="updateABTabIndex"
            :switchNames="switchName"
          ></tab-switches>
          <dropdown-picker 
            class="dropdown-picker-adjust"
            :showSelections="showLotterys" 
            :selectedContent="currentLotteryName"
            @click="unfoldLotteryNames"
            @close="hideLotteryNames"
            >
            <lottery-names :show="showLotterys" @click="chooseLotteryType"></lottery-names>
          </dropdown-picker>
         
          <dropdown-picker 
            class="dropdown-picker-adjust" 
            :showSelections="showLotteryState" 
            :selectedContent="selectedLotteryState"
            @click="unfoldLotteryState"
            @close="hideLotteryState"
            >
            <lottery-state-text @click="updateActiveTabIndex" :show="showLotteryState"></lottery-state-text>
          </dropdown-picker>
          <dropdown-picker 
            class="dropdown-picker-adjust"
            :iconClass="'iconsx_riqi'"
            :showSelections="showTimePicker"
            :selectedContent="selectedTime"
            @click="unfoldTimePicker"
            @close="foldTimePicker"
            >
          </dropdown-picker>
          <recent-days @click="updateRecentIndex" :activeRecentIndex="activeRecentIndex"></recent-days>
          <div class="search-wrapper">
            <input-search @click="updateSearchContent"></input-search>
          </div>
        </div>
        <div class="account-info">
          <bill-board class="billboard-adjust">
            <div class="billboard-content">
              <div class="item border-right">
                <div class="title">购买</div>
                <div class="amount statistics">
                  <span>-2344</span><span class="extra">.00</span>
                </div>
              </div>
              <div class="item border-right">
                <div class="title">中奖</div>
                <div class="bonus statistics">
                  <span>-54</span><span class="extra">.00</span>
                </div>
              </div>
              <div class="item">
                <div class="title">盈亏</div>
                <div class="profit statistics">
                  <span>+45</span><span class="extra">.00</span>
                </div>
              </div>
            </div>
          </bill-board>
        </div>
        <div class="orders">
          <component :is="currentComponent" :dataList="currentDataList"></component>
        </div>
      </div>
    </div>
  </div>
  <div class="order-records" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div class="center-context">
          <span class="text">
            彩票记录
          </span>
          <span class="icon">
            <i class="iconfont iconty_zhankai"></i>
          </span>
        </div>
      </template>
      <template v-slot:right>
        <input-search @click='updateSearchContent'></input-search>
      </template>
    </header-template-phone>
    <records-selector 
      :selectedData="currentLotteryName"
      @show-picker="unfoldTimePicker"
      @update-index="updateABTabIndex"
      @update-time="updateSelectedTime"
      :switchName="switchName"
      :activeIndex="activeSwitchIndex"
      @click="unfoldLotteryNames"
      >
    </records-selector>
    <div class="order-inner" ref="orders" @scroll.passive="onScroll">
      <selected-time :time="selectedTime"></selected-time>
      <div class="general-info box-shadow">
        <bill-board class="billboard-adjust">
          <div class="billboard-content">
            <div class="item border-right">
              <div class="title">购买</div>
              <div class="amount statistics">
                <span>-2344</span><span class="extra">.00</span>
              </div>
            </div>
            <div class="item border-right">
              <div class="title">中奖</div>
              <div class="bonus statistics">
                <span>-54</span><span class="extra">.00</span>
              </div>
            </div>
            <div class="item">
              <div class="title">盈亏</div>
              <div class="profit statistics">
                <span>+45</span><span class="extra">.00</span>
              </div>
            </div>
          </div>
        </bill-board>
      </div>
      <div class="tab-bar border-bottom" ref="tabbar">
        <slider-nav 
          @click="updateActiveTabIndex" 
          :list="stateList" 
          :currentTabIndex="activeTabIndex"
          :showLeftShadow="false"
        ></slider-nav>
      </div>
      <div class='order-content'>
        <component :is="currentComponent" :dataList="currentDataList"></component>
      </div>
    </div>
    <slide-up-buttons 
      :listData="lotteryCates" 
      :show="showLotterys" 
      @click="chooseLotteryType"
      @hide="hideLotteryNames"
      >
    </slide-up-buttons>
  </div>
</template>

<script>
import AccountHeader from '@/components/header/account-header/account-header'
import AccountTab from '@/pages/my-account/components/account-tab'
import TabSwitches from '@/pages/my-account/components/tab-switches'
import DropdownPicker from '@/components/base/dropdown-picker/dropdown-picker'
import LotteryNames from '@/components/base/lottery-names/lottery-names'
import LotteryStateText from '@/components/base/lottery-state-text/lottery-state-text'
import RecentDays from '@/pages/my-account/components/recent-days'
import HeaderBack from '@/components/base/header-back/header-back'
import BcModal from '@/components/base/bc-modal/bc-modal'
import SlideUpButtons from '@/components/slide-up-buttons/slide-up-buttons'
import TimePicker from '@/components/time-picker/time-picker'
import PopupSearch from './components/popup-search'
import InputSearch from '@/components/input-search/input-search'
import RecordsSelector from '@/components/records-selector/records-selector'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import BillBoard from '@/components/base/bill-board/bill-board'
import OrderSpecification from '@/components/base/order-specification/order-specification'
import SliderNav from '@/components/slider-nav/slider-nav'
import LoadMore from '@/components/base/load-more/load-more'
import SelectedTime from '@/components/base/selected-time/selected-time'
import GroupRecords from './group-records'
import PersonalRecords from './personal-records'

import { findIndexById, formatDateNoYear } from '@/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  components: {
    AccountHeader,
    AccountTab,
    TabSwitches,
    RecentDays,
    DropdownPicker,
    LotteryNames,
    HeaderTemplatePhone,
    BillBoard,
    OrderSpecification,
    RecordsSelector,
    SliderNav,
    LoadMore,
    BcModal,
    SlideUpButtons,
    TimePicker,
    PopupSearch,
    InputSearch,
    HeaderBack,
    SelectedTime,
    LotteryStateText,
    GroupRecords,
    PersonalRecords,
  },
  data() {
    return {
      personalOrders: [
        {
          lotteryName: '香港六合彩',
          lotteryId: 'xglhc',
          dateNo: '819047',
          lotteryState: 0,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() -  3600 * 1000,
          orderId: 'DD12967FT1',
          lotteryType: '香港六合彩-特码色波',
          amount: 100,
          quantity: 2,
          bonus: 280,
          refundRate: '2.5%',
          numbers: '红波'
        },
        {
          lotteryName: '重庆时时彩',
          lotteryId: 'cqssc',
          dateNo: '819047',
          lotteryState: 2,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() - 24 * 3600 * 1000,
          orderId: 'DD12967FT2',
          lotteryType: '重庆时时彩-五星直选复式',
          amount: 700,
          quantity: 20,
          bonus: 0,
          refundRate: '2.5%',
          numbers: '红波,绿波,蓝波'
        },
        {
          lotteryName: '重庆时时彩',
          lotteryId: 'cqssc',
          dateNo: '819047',
          lotteryState: 1,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() - 24 * 3600 * 1000,
          orderId: 'DD12967FT20',
          lotteryType: '重庆时时彩-五星单式',
          amount: 700,
          quantity: 20,
          bonus: 2000,
          refundRate: '2.5%',
          numbers: '12345',
          winningNumbers: '1,2,3,4,5'
        },
        {
          lotteryName: '北京赛车',
          lotteryId: 'bjsc',
          dateNo: '819047',
          lotteryState: 1,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() - 24 * 3600 * 1000,
          orderId: 'DD12967FT4',
          lotteryType: '北京赛车-特码',
          amount: 1000,
          quantity: 12,
          bonus: 2800,
          refundRate: '2.5%',
          numbers: '12357,27891,33334,77778,999876',
          winningNumbers: '1,2,3,4,5,6,7,8,9,10'
        },
        {
          lotteryName: '北京赛车',
          lotteryId: 'bjsc',
          dateNo: '819047',
          lotteryState: 2,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() - 24 * 3600 * 1000,
          orderId: 'DD12967FT5',
          lotteryType: '北京赛车-特码',
          amount: 1000,
          quantity: 2,
          bonus: 0,
          refundRate: '2.5%',
          numbers: '12357,27891,33334,77778,999876',
          winningNumbers: '1,2,3,4,5,6,7,8,9,10'
        },
        {
          lotteryName: '重庆时时彩',
          lotteryId: 'cqssc',
          dateNo: '819047',
          lotteryState: 0,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() - 24 * 3600 * 1000,
          orderId: 'DD12967FT7',
          lotteryType: '重庆时时彩-特码',
          amount: 1000,
          bonus: 2800,
          quantity: 2,
          refundRate: '2.5%',
          numbers: '12357,27891,33334,77778,999876'
        },
        {
          lotteryName: '北京赛车',
          lotteryId: 'cqssc',
          dateNo: '819047',
          lotteryState: 0,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() - 24 * 3600 * 1000,
          orderId: 'DD12967FT6',
          lotteryType: '北京赛车-特码',
          amount: 1000,
          quantity: 1,
          bonus: 2800,
          refundRate: '2.5%',
          numbers: '12357,27891,33334,77778,999876'
        },
        {
          lotteryName: '北京赛车',
          lotteryId: 'cqssc',
          dateNo: '819047',
          lotteryState: 0,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() - 24 * 3600 * 1000,
          orderId: 'DD12967FT9',
          lotteryType: '北京赛车-特码',
          amount: 1000,
          bonus: 0,
          quantity: 2,
          refundRate: '2.5%',
          numbers: '12357,27891,33334,77778,999876'
        },
      ],
      groupOrders: [
        {
          id: 1,
          accountName: 'vip888',
          lotteryName: '香港六合彩',
          lotteryId: 'xglhc',
          dateNo: '819047',
          lotteryState: 0,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() -  3600 * 1000,
          orderId: 'DD12967FT1',
          lotteryType: '香港六合彩-特码色波',
          amount: 100,
          quantity: 2,
          bonus: 280,
          refundRate: '2.5%',
          numbers: '红波'
        },
        {
          id: 2,
          accountName: 'wsx1234',
          lotteryName: '广东11选5',
          lotteryId: 'gd11x5',
          dateNo: '819047',
          lotteryState: 1,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() -  3600 * 1000,
          orderId: 'DD12967FT1',
          lotteryType: '香港六合彩-特码色波',
          amount: 100,
          quantity: 2,
          bonus: 280,
          refundRate: '2.5%',
          numbers: '万：34567,千：34567，百：36898'
        },
        {
          id: 3,
          accountName: 'wangmazi',
          lotteryName: '重庆时时彩',
          lotteryId: 'cqssc',
          dateNo: '819047',
          lotteryState: 2,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() -  3600 * 1000,
          orderId: 'DD12967FT1',
          lotteryType: '重庆时时彩-特码',
          amount: 100,
          quantity: 2,
          bonus: 280,
          refundRate: '2.5%',
          numbers: '万：5'
        },
        {
          id: 4,
          accountName: 'qaz789009',
          lotteryName: '江苏快三',
          lotteryId: 'jsks',
          dateNo: '819047',
          lotteryState: 2,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() -  3600 * 1000,
          orderId: 'DD12967FT1',
          lotteryType: '江苏快三-三连号单选',
          amount: 100,
          quantity: 2,
          bonus: 280,
          refundRate: '2.5%',
          numbers: '123'
        },
        {
          id: 5,
          accountName: 'vip9898',
          lotteryName: '江苏快三',
          lotteryId: 'jsks',
          dateNo: '819047',
          lotteryState: 1,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() -  3600 * 1000,
          orderId: 'DD12967FT1',
          lotteryType: '江苏快三-胆拖',
          amount: 100,
          quantity: 2,
          bonus: 280,
          refundRate: '2.5%',
          numbers: '红波'
        },
        {
          id: 7,
          accountName: '138138',
          lotteryName: '北京赛车',
          lotteryId: 'bjsc',
          dateNo: '819047',
          lotteryState: 1,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() -  3600 * 1000,
          orderId: 'DD12967FT1',
          lotteryType: '北京赛车-前一直选',
          amount: 100,
          quantity: 2,
          bonus: 280,
          refundRate: '2.5%',
          numbers: '2vs9：龙虎'
        },
      ],
      stateList: [
        {
          id: 1,
          tabname: '全部'
        },
        {
          id: 2,
          tabname: '未开奖'
        },
        {
          id: 3,
          tabname: '已中奖'
        },
        {
          id: 4,
          tabname: '未中奖'
        },
        {
          id: 5,
          tabname: '撤单'
        },
        {
          id: 6,
          tabname: '系统撤单'
        },
        {
          id: 7,
          tabname: '其他'
        },
      ],
      // pc
      tabs: [
        {
          id: 1,
          name: '彩票',
          component:'LotteryRecord'
        },
        {
          id: 2,
          name: '视讯',
          component: ''
        },
        {
          id: 3,
          name: '电子',
          component: ''
        },
        {
          id: 4,
          name: '赛事',
          component: ''
        },
        {
          id: 5,
          name: '斗牛',
          component: ''
        }
      ],
      // pc头部彩票/视讯
      activeIndex: 0,
      // 团队/个人
      activeSwitchIndex: 0,
      // 最近几天 
      activeRecentIndex: 0,
      // 显示彩票选择面板
     
      // 显示时间选择
      showTimePicker: false,
      //page index
      page: 0,
      switchName: [
        {
          id: 1,
          name: '团队',
        },
        {
          id: 2,
          name: '个人',
        }
      ],
      // 彩票状态pc/mobile
      activeTabIndex: 0,
      // pc
      showLotterys: false,

      showLotteryState: false,
      // 彩票状态
      selectedLotteryState: '全部',
      // 当前彩票种类 
      currentLotteryName: '全部彩票',
      lotteryCates: [
        {
          id: 0,
          name: '全部彩票',
          // path: '/select-number/shishicai'
        },
        {
          id: 1,
          name: '重庆时时彩',
          path: '/select-number/shishicai'
        },
        {
          id: 2,
          name: '极速飞艇',
          path: '/select-number/jsfeiting'
        },
        {
          id: 3,
          name: '江苏快三',
          path: '/select-number/jskuaisan'
        },
        {
          id: 4,
          name: '北京赛车',
          path: '/select-number/bjracer'
        },
        {
          id: 5,
          name: '江西快三',
          path: '/select-number/jxkuaisan'
        },
        {
          id: 6,
          name: '幸运快三',
          path: '/select-number/xykuaisan'
        },
        {
          id: 7,
          name: '极速快三',
          path: '/select-number/jskuaisan'
        },
        {
          id: 8,
          name: '十分六合彩',
          path: '/select-number/sfliuhecai'
        },
        {
          id: 9,
          name: '北京28',
          path: '/select-number/bj28'
        },
        {
          id: 10,
          name: '排列三',
          path: '/select-number/pailiesan'
        },
        {
          id: 11,
          name: '福彩3D',
          path: '/select-number/fc3D'
        },
        {
          id: 12,
          name: '极速时时彩',
          path: '/select-number/jsshishicai'
        },
        {
          id: 13,
          name: '广东11选5',
          path: '/select-number/gd11xuan5'
        },
        {
          id: 14,
          name: '香港六合彩',
          path: '/select-number/hkliuhecai'
        },
        {
          id: 15,
          name: '安徽快三',
          path: '/select-number/ahkuaisan'
        },
        {
          id: 16,
          name: '新疆时时彩',
          path: '/select-number/xjshishicai'
        },
        {
          id: 17,
          name: '极速赛车',
          path: '/select-number/jssaiche'
        },
        {
          id: 18,
          name: '幸运飞艇',
          path: '/select-number/xyfeiting'
        },
        {
          id: 19,
          name: '上海快三',
          path: '/select-number/shkuaisan'
        },
        {
          id: 20,
          name: '湖北快三',
        },
        {
          id: 21,
          name: '天津时时彩',
        },
        {
          id: 22,
          name: '河北快三',
          
        },
        {
          id: 23,
          name: '甘肃快三',
          path: '/select-number/gskuaisan'
        },
        {
          id: 24,
          name: '广西快三',
          path: '/select-number/gxkuaisan'
        },
        {
          id: 25,
          name: '山东11选5',
          path: '/select-number/sd11xuan5'
        },
        {
          id: 26,
          name: '腾讯分分彩',
          path: '/select-number/txfenfencai'
        },
        {
          id: 27,
          name: '福建快三',
          path: '/select-number/fjkuaisan'
        },
        {
          id: 28,
          name: '贵州快三',
          path: '/select-number/gzkuaisan'
        },
        {
          id: 29,
          name: '河内时时彩',
          path: '/select-number/hnshishicai'
        },
        {
          id: 30,
          name: '老北京赛车',
          path: '/select-number/lbjracer'
        },
      ],
      // 搜索内容
      searchContent: '',
      // 查询时间 
      selectedTime: '今天',
    }
  },
  mounted() {
    this.tabBar = this.$refs.tabbar 
    if (this.getIsPhone) {
      window.addEventListener('scroll', () => {
        this.scrollHandler()
      }, true)
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollHandler)
  },
  methods:{
    unfoldLotteryNames() {
      this.showLotterys = true
    },
    hideLotteryNames() {
      this.showLotterys = false 
    },
    chooseLotteryType(index) {
      this.currentLotteryName = this.lotteryCates[index].name
      this.showLotterys = false
    },
    unfoldLotteryState() {
      this.showLotteryState = true 
    },
    hideLotteryState() {
      this.showLotteryState = false 
    },
    unfoldTimePicker() {
      this.showTimePicker = true
    },
    foldTimePicker() {
      this.showTimePicker = false 
    },
    // 手机 +  pc
    updateActiveTabIndex(index) {
      this.activeTabIndex = index
      this.selectedLotteryState = this.stateList[index].tabname
      this.showLotteryState = false 
    },
    handleGoBack() {
      this.$router.go(-1)
    },
    // pc头部导航
    updateActiveIndex(index) {
      this.activeIndex = index
    },
    // 团队个人 
    updateABTabIndex(index) {
      this.activeSwitchIndex = index
      this.activeTabIndex = 0
    },
    // pc最近几天
    updateRecentIndex(index) {
      this.activeRecentIndex = index
    },
    handleClick() {
      this.$router.push({path: '/order/records'})
    },
    cancelOrder(id) {
     this.unsettleOrder.some((item, index) => {
       if(item.orderId == id) {
         this.unsettleOrder.splice(index, 1)
         return true
       }
     })
    },
    getSum(key) {
      let ret = 0
      this.unsettleOrder.forEach(order => {
        ret += order[key]
      })
      return ret
    },
    classObj(item) {
      let className = ''
      switch(item.lotteryState) {
        case 0:
          className = '#icondingdan_weikaijiang'
          break;
        case 1:
          className = "#icondingdan_yizhongjiang"
          break;
        case 2:
          className = "#icondingdan_weizhongjiang"
      }
      return className
    },
    formatDate(row, column, cellValue) {
      return formatDateNoYear(cellValue)
    },
    formatLotteryState(state) {
      switch(state) {
        case 0: 
          return '未开奖'
          break;
        case 1: 
          return '已中奖'
          break;
        case 2: 
          return '未中奖'
          break;
        case 3: 
          return '已撤单'
          break;
      }
    },
    handleLoadMore() {
      this.page++
    },
    
    updateSearchContent(value) {
      this.searchContent = value
    },
    scrollHandler() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= 110) {
        this.tabBar.style.position = 'fixed'
        this.tabBar.style.top = '87px'
        this.tabBar.style['z-index'] = 100
        this.tabBar.style['border-top'] = '1px solid #dbd3d3'
      } else {
        this.tabBar.style.position = 'static'
        this.tabBar.style['border-top'] = 'none'
      }
    },
    
    updateSelectedTime(time) {
      this.selectedTime = time
    },
    // pc
    
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
    totalAmount() {
      return this.getSum('amount')
    },
    totalBonus() {
     return this.getSum('bonus')
    },
    currentComponent() {
      return this.activeSwitchIndex == 0 ? 'GroupRecords' : 'PersonalRecords'
    },
    currentDataList() {
      let arr = this.activeSwitchIndex == 0 ? this.groupOrders : this.personalOrders
      let currentData = []
      switch (this.activeTabIndex) {
        case 0: 
          currentData = arr 
          break;
        case 1: 
          currentData = arr.filter(item => {
            return item.lotteryState == 0
          })
          break;
        case 2: 
          currentData = arr.filter(item => {
            if (item.lotteryState == 1) {
              return item
            }
            // return item.lotteryState == 1
          })
          break;
        case 3: 
          currentData = arr.filter(item => {
            return item.lotteryState == 2
          })
          break;
      }
      return currentData 
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  @media screen and (min-width 750px) 
    .billboard-adjust >>> .content 
      margin-bottom 0 !important
    .billboard-adjust >>> .bg-bar 
      width 101% !important
    .billboard-adjust  
      margin 0 12px
    .order-records 
      width 100%
      .main-wrapper 
        box-sizing border-box 
        padding-top 128px
        .main 
          box-sizing border-box 
          width 1200px 
          margin 0 auto
          margin-top 10px
          background #fff
          margin-top 10px 
          border-radius 3px
          .pickers 
            // height 48px
            display flex
            align-items center
            box-sizing border-box 
            padding 10px 20px 0 20px
            background #fff
            .tab-switch 
              margin-right 20px
            .dropdown-picker 
              margin-right 10px
              .iconfont 
                &.active 
                  color $color-theme-red 
            .dropdown-picker-adjust 
              margin-right 10px 
            .search-wrapper 
              flex 1
              display flex 
              justify-content flex-end
            .search-wrapper >>> .dropdown-picker 
              width 190px 
              margin-right 0px
              .lottery-name 
                width 155px 
                input 
                  width 155px 
                  box-sizing border-box 
                  padding-left 10px 
                  outline none
                  background none
          .account-info 
            width 100%
            padding 12px 25px
            box-sizing border-box
            background #faf8f8
            align-items center
            .billboard-content 
              width 100% 
              display flex
              height 45px
              background #fff
              padding 15px 0
              .item 
                width 33.33% 
                display flex 
                flex-direction column 
                justify-content center
                box-sizing border-box 
                .title 
                  margin-bottom 10px
                  color $color-sub-grey
                .statistics
                  display inline-block
                  span 
                    font-size 15px
                  .extra 
                    display inline-block
                    font-size 10px
                  &.amount 
                    color $color-primary-green
                  &.bonus
                    color $color-theme-red
                  &.profit 
                    color $color-theme-red
          .orders  
            .load-more 
              height 60px 
              line-height 60px 
              text-align center
          .orders >>> .el-table 
            tr 
              height 40px 
              line-height 40px
              padding-top 0
            th 
              padding 0
              background #e7e0dd
              color $color-theme-dark
              font-weight 700
              .cell
                padding-left 20px
                font-weight 700
            td 
              padding 0
              height 40px
              line-height 40px
              .cell 
                padding-left 20px
                height 21px
                button 
                  color $color-sub-grey
                  padding 0
  @media screen and (max-width 750px)
    .billboard-adjust >>> .content 
      margin-bottom 0 !important
    .order-inner >>> .buttons 
      display none !important
    .order-records 
      .center-context 
        .text
          font-size 15px
          color #fff6d6
        .icon 
          .iconfont 
            color #fff6d6 
            font-size 12px
      .order-inner
        box-sizing border-box 
        padding-top 88px
        .notice-hint 
          padding 0 10px 
          box-sizing border-box 
          background $color-nav-bg
          color $color-text-yellow
          .highlight 
            color $color-theme-red
        .notice-hint >>> .content 
          height 24px 
          line-height 24px 
          padding 0
        .general-info
          width 100%
          padding 0px 10px 10px 10px
          box-sizing border-box
          box-shadow inset 0px -3px 6px #ccc
          .billboard-content 
            width 100% 
            display flex
            height 75px
            background #fff
            overflow hidden
            .item 
              width 33.33% 
              box-sizing border-box 
              display flex 
              flex-direction column 
              justify-content center
              .title 
                margin-bottom 10px
                color $color-sub-grey
              .statistics
                display inline-block
                span 
                  font-size 15px
                .extra 
                  display inline-block
                  font-size 10px
                &.amount 
                  color $color-primary-green
                &.bonus
                  color $color-theme-red
                &.profit 
                  color $color-theme-red
        .time-selected 
          height 24px
          line-height 24px
          text-align center
          color $color-sub-grey
          display flex 
          align-items center
          justify-content space-between
          // margin-top 10px
          .line 
            height 1px 
            width calc((100% - 50px) / 2) 
            border-top 1px dashed #cccdd0
          .context 
            margin 0 10px
        .order-content 
          box-sizing border-box 
          padding 10px
          .order-item 
            margin-bottom 10px 
            box-shadow 0 2px 3px #ddd
            .items 
              box-sizing border-box 
              padding 0 10px
              background-color #fff
              .item 
                line-height 2
                .item-title 
                  margin-right 10px
                .item-amount 
                  color $color-primary-green 
                .item-bonus 
                  color $color-theme-red
                .at 
                  color $color-theme-red
            .lottery-state 
              position absolute
              top 10px
              right 10px
              .svg 
                font-size 50px
        .tab-bar 
          width 100%
          background $color-text-button
</style>